<template>
	<div class="mineAttention-box-zxyh">
		<ZxyhHeader v-if="getPlatform=='app'" :title="'我的关注'" :isClose='false'></ZxyhHeader>
		<div v-else class="mineCollect-box-title">
			<div v-if="isBack" class="back" @click="comeBack()"></div>
			<p>我的关注</p>
		</div>
		<!--没有关注-->
		<div class="no-data-box" v-if="attentionList.length<1">
			<i></i>
			<p>您还没有关注直播间哦～</p>
		</div>
		<ul v-else class="main-box" v-infinite-scroll="loadMore" infinite-scroll-disabled="busy" infinite-scroll-distance="10">
			<li class="li-item" v-for="(v,index) of attentionList" @click="linkLive(v.acct,v.roomId)" :key="index">
				<div class="li-item-top"> 
                     <p><i class="logo"></i><span>{{v.title}}</span></p>
					 <span class="date">{{v.time}}</span>
				</div>
				<div class="img-box">
					<img :src="v.imagUrl+'?x-oss-process=image/resize,m_fixed,h_390,w_690'" alt="">
					<LiveStatus :status="v.roomStatus"></LiveStatus>
				</div>
			</li>
		</ul>
	</div>
</template>
<script>
import ZxyhHeader from '@/components/zxyh/zxyhHeader'
import LiveStatus from '../my/components/liveStatus.vue'//直播状态
	export default {
		components:{
		 ZxyhHeader,
		 LiveStatus
		},
		data() {
			return {
				attentionList: [],
				tipImg: false,
				isBack: false, //返回按钮显示不显示
				page: 0,
				busy: false,
				getPlatform:fun.getPlatform() //app wx
			}
		},
		created: function() {
			var ua = navigator.userAgent.toLowerCase();
			this.isBack = (/MicroMessenger/i).test(ua) //true  微信 
		},
		mounted() {
			this.$store.dispatch("hideNav");
			this.getGzList()
		},
		methods: {
			loadMore() {
				this.busy = true;
				setTimeout(() => {
					this.page++;
					this.getGzList();
				}, 200);
			},
			getGzList: function() {
				this.$http.get("/h5live/gz?page=" + this.page).then(
					res => {
						if(res.data.code === '000000') {
							if(res.data.data.length) {
								this.busy = false;
								this.attentionList = [...this.attentionList, ...res.data.data];
								if(res.data.data.length < 10){
									this.busy = true;
								}
							} 
						}
					},
					err => {}
				);
			},
			//跳转到直播间
			linkLive: function(ownerId, roomId) {
				this.$router.push(`/${this.$channel}/liveRoom/${roomId}?action=gz&dzhPage=true`);
			},
			comeBack() {
				this.$router.push(`/${this.$channel}/mine`);
			}
		},
		filters: {
			filterNum: function(type) { //roomStatus 0是预告 1是开播  2 是关播 
				switch(type) {
					case 2:
						return '离线'
					case 1:
						return '正在直播'
					case 0:
						return '直播预告'
					default:
						break;
				}
			}
		}
	}
</script>

<style scoped="scoped">
	.mineAttention-box-zxyh{
		height: 100vh;
		width: 100vw;
		overflow-y: hidden;
	}
	 .mineCollect-box-title {
		position: relative;
	}
    .mineCollect-box-title p {
		width: 100%;
		height: 80px;
		font-size: 36px;
		text-align: center;
		line-height: 80px;
		color: #333333;
	}
   .back {
		width: 65px;
		height: 55px;
		background: url(../../assets/images/iconsmall.png) no-repeat;
		background-size: 150px 150px;
		position: absolute;
		top: 20px;
		left: 40px;
	}
	.main-box{
		height: calc(100vh - 88px);
		overflow-y: auto;
		background: rgba(247, 247, 247, 1);
	}
	.header-conatiner-zxyhIos+.main-box{
		height: calc(100vh - 146px);
	}
	.li-item{
		padding: 30px;
		height: 560px;
		padding-bottom: 53px;
		margin-bottom: 6px;
		background: #FFFFFF;
		border-top: 1px solid #EEEEEE;
	}
	.li-item-top{
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 18px;
	}
	.li-item-top p{
		display: flex;
		flex-direction: row;
		align-items: center;
	}
	.li-item-top .logo{
		display: inline-block;
        width: 50px;
		height: 50px;
		margin-right: 10px;
		border-radius: 50%;
		background: url('../../assets/images/zxyh/my/logo.png') no-repeat;
		background-size: 100% 100%;
	}
	
	.li-item-top p span{
		flex:1;
		font-size: 30px;
		font-weight: 500;
		color: #333333;
		letter-spacing: 1px;
	}
	.li-item-top .date{
		font-size: 30px;
		font-weight: 400;
		color: #666666;
		line-height: 42px;
	}
	.li-item .img-box{
		position: relative;
	}
	
	.li-item img{
		position: absolute;
		width: 100%;
		top: 0;
		left: 0;
		height: 390px;
		border-radius: 24px;
	}
	.li-item .img-box .live-status-box{
	position: absolute;
	top: 30px;
	right: 30px;
}
	/* 无数据 */
	.no-data-box {
		position: absolute;
		top: 450px;
		left: 210px;
	}
	.no-data-box i{
		display: inline-block;
		width: 326px;
		height: 326px;
		background: url('../../assets/images/zxyh/my/attention.png') no-repeat;
		background-size: 326px 326px;
	}
	.no-data-box p{
		font-size: 30px;
		font-weight: 400;
		color: #999999;
		line-height: 42px;
		letter-spacing: 1px;
	}

		.header-conatiner-zxyhIos,
.header-conatiner {
  position: relative !important;
  left: 0px;
  top: 0px;
}
</style>